<template>
  <div class="page-base">
    <fbr></fbr>
    <div style="padding-left: 30px;">
        <div class="flex-c">
        <img style="width: 36px;height: 36px;" :src="emialImg" />
        <div class="page-name">名称：物理机</div>
        <div class="page-status">状态</div>
    </div>
    <div class="data-box">
        <div class="flex-c">
            <div class="flex-c item"><div class="label">创建人：</div><div class="value">曲丽丽</div></div>
            <div class="flex-c item"><div class="label">生效日期：</div><div class="value">2017-01-10～ 2017-01-10</div></div>
            <div class="flex-c item"><div class="label">主机类别：</div><div class="value">通用型计算型</div></div>
        </div>
        <div class="flex-c">
            <div class="flex-c item"><div class="label">创建时间：</div><div class="value">2017-01-10</div></div>
            <div class="flex-c item"><div class="label">可用区：</div><div class="value">可用区1</div></div>
            <div class="flex-c item"><div class="label">规格：</div><div class="value">通用计算增强型 | c7n.large.2 | 2vCPUs | 4GiB</div></div>
        </div>
    </div>
    </div>
    <fbr></fbr>
    <div class="flex-c">
        <cardBox cName="CPU使用率" width="368px" class="mr20">
            <img style="width: 267px; height: 228px;" :src="dashboard1">
        </cardBox>
        <cardBox cName="磁盘使用率" width="368px" class="mr20">
            <img style="width: 258px; height: 228px;" :src="dashboard2">
        </cardBox>
        <cardBox cName="内存使用率" width="368px" class="mr20">
            <img style="width: 267px; height: 228px;" :src="dashboard1">
        </cardBox>
        <cardBox cName="网络连接数" width="368px" class="mr20">
            <div class="img-p">
                <img class="imgp1" :src="yimg1">
                <img class="imgp2" :src="yimg2">
                <img class="imgp3" :src="yimg3">
                <div class="num">3413</div>
            </div>
        </cardBox>
    </div>
    <div class="flex-c">
        <cardBox cName="当前进程状态分布" width="368px" class="mr20">
            <img style="width: 267px; height: 228px;" :src="pie">
        </cardBox>
        <cardBox cName="TCP连接情况" width="1137px">
            <div class="flex-c">
                <div style="width: 285px; display: flex;justify-content: center;align-items: center;">
                <div class="img-p">
                    <img class="imgp1" :src="yimg1">
                    <img class="imgp2" :src="yimg2">
                    <img class="imgp3" :src="yimg3">
                    <div class="num">3413</div>
                </div>
            </div>
            <div>
                <div class="flex-c"  style="margin-bottom: 20px;">
                    <div class="mini-box" v-for="item in colorList1" :key="item" :style="`background-color:${item};margin-right:10px;`">
                        <div class="num">545</div>
                        <div class="des">TCP SYS_SENT状态的连接数</div>
                    </div>
                </div>
                <div class="flex-c"  style="margin-bottom: 20px;">
                    <div class="mini-box" v-for="item in colorList2" :key="item" :style="`background-color:${item};margin-right:10px;`">
                        <div class="num">545</div>
                        <div class="des">TCP SYS_SENT状态的连接数</div>
                    </div>
                    <div class="mini-box mini-box2">
                        <div class="num">89%</div>
                        <div class="des">TCP重传率</div>
                    </div>
                </div>
            </div>
            </div>
            
        </cardBox>

    </div>
    <div class="flex-c">
        <cardBox cName="近1小时磁盘读带宽趋势" width="753px" class="mr20">
            <img style="width: 681px; height: 236px;" :src="eimg1">
        </cardBox>
        <cardBox cName="近1小时磁盘写带宽趋势" width="753px" class="mr20">
            <img style="width: 675px; height: 236px;" :src="eimg2">
        </cardBox>
    </div>
    <div class="flex-c">
        <cardBox cName="近1小时网卡包接收数量" width="753px" class="mr20">
            <img style="width: 681px; height: 241px;" :src="eimg3">
        </cardBox>
        <cardBox cName="近1小时网卡包发送数量" width="753px" class="mr20">
            <img style="width: 675px; height: 241px;" :src="eimg3">
        </cardBox>
    </div>
  </div>
</template>

<script>
import cardBox from './cardBox.vue'
export default {
    components:{cardBox},
    data(){
        return{
            colorList1:['#35c67e47','#35c67e65','#35c67e9c','#35c67ec9','#35c67ee4','#35c67e'],
            colorList2:['#35c67e47','#35c67e65','#35c67e9c','#35c67ec9','#35c67ee4'],
            emialImg:require('./img/email.png'),
            dashboard1:require('./img/dashboard1.png'),
            dashboard2:require('./img/dashboard2.png'),
            eimg1:require('./img/eimg1.png'),
            eimg2:require('./img/eimg2.png'),
            eimg3:require('./img/eimg3.png'),
            pie:require('./img/pie.png'),
            yimg1:require('./img/yimg1.svg'),
            yimg2:require('./img/yimg2.svg'),
            yimg3:require('./img/yimg3.svg'),
        }
    }

}
</script>

<style lang="less" scoped>
.page-base{
    .page-name{
    font-weight: 700;
    font-size: 20px;
    color: #000000d8;
    margin: 0 120px 0 20px;
    }
    .page-status{
        width: 62px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #2074F3;
        border: 1px #2074F3 solid;
        cursor: pointer;
        border-radius: 2px;
        &:hover{
            color: #fff;
            background-color: #2074F3;
        }
    }
    .data-box{
        margin-left: 60px;
        margin-top: 20px ;
        .item{
            min-width: 300px;
            margin-bottom: 20px ;
            .label{
                min-width: 80px;
                font-weight: 400;
                font-size: 14px;
                color: #000000d8;
            }
            .value{
                color: #000000A5;
            }
        }
    }
    .img-p{
        position: relative;
        width: 235px;
        height: 235px;
        .imgp1{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 235px;
            height: 235px;
            opacity: 0.12;

        }
        .imgp2{
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 225px;
            height: 114px;
            opacity: 0.3;
        }
        .imgp3{
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 225px;
            height: 114px;
            opacity: 0.8;
        }
        .num{
            position: absolute;
            top: 100px;
            left: 80px;
            font-weight: 700;
            font-size: 32px;
            color: #0C5E37;
            text-align: center;
        }
        
    }
    .mini-box{
        text-align: center;
        width: 130px;
        height: 76px;
        padding: 5px 1px;
        .num{
            font-weight: 400;
            font-size: 28px;
            color: #333333;
            text-align: center;
        }
        .des{
            font-weight: 400;
            font-size: 13px;
            color: #333333;
            text-align: center;
        }
    }
    .mini-box2{
        background-color: #f9b93c;
        .num{
            font-size: 36px;
        }
    }
}

</style>